<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>WOW</title>
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/mycss.css">
  <!-- 
    如果是vue脚手架就在<style lang="scss" scoped> @import url(''); </style>中使用
    或 @import 'xx';
  -->
  <style>
    .wow:first-child {
      visibility: hidden;
    }
  </style>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <div id="container">
    <header>
      <h1>WOW.js</h1>
    </header>
    <div id="main">
      <section class="wow fadeInDown" style="background-color: #f1c40f;"></section>
      <section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite"
        data-wow-duration="1500ms"></section>
      <section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
      <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
      <section class="section--green wow slideInLeft" data-wow-duration="4s"></section>
      <button id="moar">LOAD MOAR!!</button>
    </div>
  </div>
  <script src="js/wow.min.js">
  </script>
  <script>
    new WOW().init();
  </script>
</body>

</html>